<template>
  <div>
    <!-- 灰色的蒙层 -->
    <transition name="myfade1">
      <div class="huise" v-show="$route.path == '/home/popup'"></div>
    </transition>
    <!-- 首页全部内容 -->
    <transition name="myfade">
      <div v-if="$route.path == '/home'" class="homecontent">
        <van-search
          v-model="searchval"
          disabled
          shape="round"
          background="#fff"
          placeholder="输入搜索关键词"
          @click="goToPopup"
        />
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image" alt="" width="100%" style="display: block" />
          </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <MyGrid :channel="channel" />
        <!-- 品牌制造商直供 -->
        <BrandList :brandList="brandList" />
        <!-- 新品首发 -->
        <ProductHome :goodsList="newGoodsList" mytitle="周一周四·新品首发" />
        <!-- 人气推荐 -->
        <PersonRecomed :hotGoodsList="hotGoodsList" />
        <!-- 专题精选 -->
        <SpecialTopic :topicList="topicList" />
        <!-- 分类 -->
        <div v-for="item in categoryList" :key="item.id" class="homecategory">
          <ProductHome :goodsList="item.goodsList" :mytitle="item.name" />
        </div>
        <div class="last"></div>
      </div>
    </transition>

    <!-- popup搜索内容 -->
    <transition name="slide">
      <router-view v-if="$route.path == '/home/popup'" />
    </transition>
    <BackTop />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MyGrid from "@/components/home/MyGrid.vue";
import BrandList from "@/components/home/BrandList.vue";
import ProductHome from "@/components/home/ProductHome";
import PersonRecomed from "@/components/home/PersonRecomed";
import SpecialTopic from "@/components/home/SpecialTopic";
import BackTop from "@/components/BackTop";
export default {
  name: "Home",
  data() {
    return {
      searchval: "",
      images: [
        require("@/assets/轮播1.jpg"),
        require("@/assets/轮播2.jpg"),
        require("@/assets/轮播3.jpg"),
        require("@/assets/轮播4.jpg"),
      ],
    };
  },
  components: {
    MyGrid,
    BrandList,
    ProductHome,
    PersonRecomed,
    SpecialTopic,
    BackTop,
  },
  mounted() {
    this.$store.dispatch("getHomeDB");
  },
  computed: {
    ...mapGetters([
      "channel",
      "brandList",
      "newGoodsList",
      "hotGoodsList",
      "topicList",
      "categoryList",
    ]),
  },
  methods: {
    goToPopup() {
      this.$router.push("/home/popup");
    },
  },
  created() {
    if (localStorage.getItem("userToken")) {
    } else {
      this.$toast.loading({
        message: "请先登录...",
        forbidClick: true,
      });
      this.$store.commit("CHANGEISLOGINED", false);
      this.$router.push({
        path: "/user",
      });
    }
  }
};
</script>

<style scoped>
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.4s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}

.huise {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  z-index: 99;
}

/* 首页内容的淡出 */
.myfade-leave {
  opacity: 1;
}
.myfade-leave-active {
  transition: opacity 0.5s linear;
}
.myfade-leave-to {
  opacity: 0;
}

/* 只要淡入 */
.myfade1-enter,
.myfade1-leave-to {
  opacity: 0;
}
.myfade1-enter-active,
.myfade1-leave-active {
  transition: opacity 0.5s linear;
}
.myfade1-enter-to,
.myfade1-leave {
  opacity: 1;
}

.last {
  width: 100%;
  background: #fff;
  height: 50px;
}
</style>